<template>
    <div>
        <!-- 模拟绑定和事件触发 -->
        <!-- <button @click="btnClick">HYinput按钮</button>
        <h2>HYinput的message: {{modelValue}}</h2> -->

        <!-- 通过input -->
        <!-- <input type="text" :value="modelValue" @input="btnClick"> -->

        <!-- 这样不对 不能绑定到props -->
        <!-- <input type="text" v-model="modelValue"> -->

        <!-- 自定义 -->
        <!-- <input v-model="value"> -->
 
        <input v-model="value"> 
        <input v-model="leon">

    </div>
</template>

<script>
    export default {
        props: {
            modelValue: String,
            title: String
        },
        emits: ['update:modelValue', 'update:title'],
        computed: {
            value: {
                set(value) {
                    this.$emit('update:modelValue', value);
                },
                get() {
                    return this.modelValue;
                }
            },
            leon: {
                set(title) {
                    // 这里老师讲的时候 把参数都改成了leon 不改好像也可以
                    // 参数名一样就可以
                    this.$emit('update:title', title);
                },
                get() {
                    return this.title;
                }
            }
        },
        methods: {
            // 点击之后,把值赋给了message
            // btnClick() {
            //     this.$emit('update:modelValue', '123')
            // }
            btnClick(event) {
                this.$emit('update:modelValue', event.target.value)
            }
        }
    }
</script>

<style scoped>

</style>